<template>
  <div style="width: 100%; height: 100%; background-color: white;">
  <div style="width: 98%; height: 100%; background-color:white;">
    <div style="width:96%; height: 95%; background-color:  white;">
      <el-row>
        <el-col :span="8" :offset="16">
          校&nbsp&nbsp&nbsp&nbsp区:&nbsp&nbsp<el-select style="width: 270px;">
            <el-option>

            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row style="margin-top: 10px; border: 1px solid red;">
        <el-col :span="8" :offset="4" style="width: 300px; height: 180px;">
          <h4 style="margin-left: -70px;">订单总金额(元):36000</h4>
          <div id="chart" style="width:100%; height: 100%; margin-top: -60px;">
          </div>
      </el-col>
      <el-col :span="8" :offset="4" style="width: 300px; height: 180px;">
        <h4 style="margin-left: -70px;">订单总数(条):36000</h4>
          <div id="chart1" style="width:100%; height: 100%; margin-top: -60px;"></div>
      </el-col>
      </el-row>
      <el-row style="margin-top: 10px;">
        <el-col :span="24">
          <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" size="mini" style="width: 100%;">
            <el-menu-item index="1">处理中心</el-menu-item>
            <el-menu-item index="2">消息中心</el-menu-item>
            <el-menu-item index="3" >消息中心</el-menu-item>
            <el-menu-item index="4">订单管理</el-menu-item>
          </el-menu>
        </el-col>
      </el-row>
      <el-descriptions>
    <el-descriptions-item label="订单种类"><el-select size="mini"><el-option></el-option></el-select></el-descriptions-item>
    <el-descriptions-item label="订单状态"><el-select size="mini"><el-option></el-option></el-select></el-descriptions-item>
    <el-descriptions-item label="搜索"><el-input size="mini" style="width: 230px;"></el-input><el-button
            type="primary"
            class="searchBtn"
            icon="el-icon-search"
            size="mini"
            @click="formSearch"
            >查询</el-button
          ></el-descriptions-item>
    <el-descriptions-item label="联系地址">
      <el-date-picker
      v-model="value2"
      size="mini"
      type="daterange"
      align="right"
      unlink-panels
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions">
    </el-date-picker>
        </el-descriptions-item>
      </el-descriptions>
      <el-row style="background-color: aliceblue;">
        <el-col :span="10">
        <div style="float: left; color: black;">
        <label>订单数目:</label>
        <label style=" margin-left: 30px;">应收:</label>
        <label style=" margin-left: 30px;">实收:</label>
        <label style=" margin-left: 30px;"> 尾款:</label>
        <label style=" margin-left: 30px;">积分抵扣:</label>
        </div>
       </el-col>
      <el-col :span="4" :offset="10">
        <el-button type="info" size="small">批量删除</el-button>
        <el-button type="danger" size="small ">导出订单</el-button>
      </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <template>
                <el-table
                    :data="houselist"
                    border
                    stripe
                    style="width: 100%"
                    tooltip-effect="dark"
                    @selection-change="handleSelectionChange">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            prop="id"
                            label="业主id"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="idcard"
                            label="身份证号码"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="业主名"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="cellphone"
                            label="电话号码"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="gender"
                            label="性别"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            width="300px"
                            label="操作"
                            align="center">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" @click="detal(scope.row)">查看</el-button>
                            <el-button type="warning" size="mini"  @click="update(scope)">修改</el-button>
                            <el-button type="danger" size="mini" @click="del(scope)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </el-col>
      </el-row>
    </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
  export default{
    data(){
      return{
        name: 'Chart',
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value2: ''
      };
    },

  mounted() {
    this.initChart()
    this.initChart2()
  },
  methods: {
    initChart() {
      const chart = echarts.init(document.getElementById('chart'))
      const option = {
        title: {

        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['销量']
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六','周七']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '订单金额',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20,30]
          }
        ]
      }
      chart.setOption(option)
    },
    initChart2() {
      const chart = echarts.init(document.getElementById('chart1'))
      const option = {
        title: {

        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['销量']
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六','周七']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '订单金额',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20,30]
          }
        ]
      }
      chart.setOption(option)
    }

  }
}
</script>

<style scoped>
</style>
